import { Button, Modal, Toast } from "antd-mobile";
import React, { useEffect, useState } from "react";
import { isValidArr } from "@/utils";
// import { useCountDown } from 'ahooks'
import { CloseCircleFill, CloseCircleOutline } from "antd-mobile-icons";

const ModalContent = ({ title, content, header, actions, answer, timer, renderAction }) => {
  const [time, setTime] = useState(timer)
  useEffect(() => {
    let t
    if (timer) {
      // setTime(timer)
      t = setInterval(() => {
        setTime(s => {
          const result = s -= 1
          if (result <= 0) {
            console.log('vvv')
            clearInterval(t)
            return 0
          }
          console.log(result)
          return result
        })
        console.log('xxxxx')
      }, 1000)
    }
    return () => {
      if (t) {
        clearInterval(t)
      }
    }
  }, [time])
  return (
    <div className="inner">
      {renderAction(time)}

      {
        header &&
        <div className="header">{header}</div>
      }
      {
        title &&
        <div className="title">{title}</div>
      }
      {
        content &&
        <div className="content">
          {content}
        </div>
      }

      <div className="operation">
        {
          isValidArr(actions) || typeof actions === `object` ?
            actions : <Button onClick={e => {

              // c.close()
              Modal.clear()
              Toast.clear()

            }} size="small" className="act-btn act-btn-bevel">确 定</Button>
        }
      </div>
    </div>
  )
}
export default function callFeedback({ title, content, header, actions, answer, hideClose, onConfirm, timer, ...props }) {
  // const [cuntdown, setCoundown] = useCountDown()
  // const [disable, setDisable] = useState(true)

  // console.log(timer)
  const c = Modal.show({
    bodyClassName: `act-border-wrapper act-feedback-modal`,
    content: <ModalContent
      hideClose={hideClose}
      title={title}
      content={content}
      header={header}
      actions={actions}
      answer={answer}
      onConfirm={onConfirm}
      timer={timer}
      renderAction={(value) => {
        return <>
          {
            !hideClose &&
            // <div className="close-btn" onClick={e => c.close()} ><CloseCircleOutline /></div>
            <div className="close-btn" onClick={e => {
              if (value) {
                return
              }
              c.close()
              if (typeof onConfirm === 'function') {
                onConfirm()
              }
            }} >
              <Button className="act-btn act-btn-bevel">确 定{value ? `（${value}）` : null}</Button>
            </div>
          }
        </>
      }
      }
    >

    </ModalContent>,
    closeOnAction: true,
    closeOnMaskClick: true,
    ...props
  })

  return c
}